<template>
  <div class="foreign-key-warning">
    <!-- 删除前依赖检查对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleCancel"
    >
      <div class="warning-content">
        <!-- 警告图标和标题 -->
        <div class="warning-header">
          <el-icon class="warning-icon" size="24">
            <WarningFilled />
          </el-icon>
          <span class="warning-title">{{ warningTitle }}</span>
        </div>

        <!-- 主要警告信息 -->
        <div class="warning-message">
          {{ warningMessage }}
        </div>

        <!-- 依赖关系列表 -->
        <div v-if="dependencies.length > 0" class="dependencies-section">
          <h4>检测到的依赖关系：</h4>
          <ul class="dependencies-list">
            <li 
              v-for="(dep, index) in displayDependencies" 
              :key="index"
              class="dependency-item"
            >
              <el-icon class="dep-icon">
                <Link />
              </el-icon>
              {{ dep }}
            </li>
          </ul>
          
          <!-- 如果依赖项太多，显示折叠按钮 -->
          <div v-if="dependencies.length > maxDisplayCount" class="show-more-section">
            <el-button 
              type="text" 
              size="small"
              @click="toggleShowAll"
            >
              {{ showAll ? '收起' : `显示全部 (${dependencies.length} 项)` }}
              <el-icon>
                <component :is="showAll ? 'ArrowUp' : 'ArrowDown'" />
              </el-icon>
            </el-button>
          </div>
        </div>

        <!-- 建议解决方案 -->
        <div v-if="suggestion" class="suggestion-section">
          <h4>建议解决方案：</h4>
          <div class="suggestion-content">
            <el-icon class="suggestion-icon">
              <InfoFilled />
            </el-icon>
            {{ suggestion }}
          </div>
        </div>

        <!-- 风险提示 -->
        <div class="risk-notice">
          <el-alert
            type="warning"
            show-icon
            :closable="false"
            :title="riskTitle"
            :description="riskDescription"
          />
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">
            {{ cancelText }}
          </el-button>
          <el-button 
            type="primary" 
            :loading="confirmLoading"
            @click="handleConfirm"
          >
            {{ confirmText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'
import { 
  WarningFilled, 
  InfoFilled, 
  Link, 
  ArrowUp, 
  ArrowDown 
} from '@element-plus/icons-vue'

// Props定义
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '操作确认'
  },
  warningTitle: {
    type: String,
    default: '检测到数据依赖关系'
  },
  warningMessage: {
    type: String,
    default: '该操作可能会影响相关的数据，请确认是否继续？'
  },
  dependencies: {
    type: Array,
    default: () => []
  },
  suggestion: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定删除'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  riskTitle: {
    type: String,
    default: '风险提示'
  },
  riskDescription: {
    type: String,
    default: '此操作不可恢复，请谨慎操作！'
  },
  maxDisplayCount: {
    type: Number,
    default: 5
  }
})

// Emits定义
const emit = defineEmits(['confirm', 'cancel', 'update:visible'])

// 响应式数据
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const confirmLoading = ref(false)
const showAll = ref(false)

// 计算属性
const displayDependencies = computed(() => {
  if (showAll.value || props.dependencies.length <= props.maxDisplayCount) {
    return props.dependencies
  }
  return props.dependencies.slice(0, props.maxDisplayCount)
})

// 方法
const toggleShowAll = () => {
  showAll.value = !showAll.value
}

const handleConfirm = async () => {
  confirmLoading.value = true
  try {
    await emit('confirm')
  } finally {
    confirmLoading.value = false
  }
}

const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}
</script>

<script>
export default {
  name: 'ForeignKeyWarning'
}
</script>

<style scoped>
.foreign-key-warning {
  /* 组件根元素样式 */
}

.warning-content {
  padding: 10px 0;
}

.warning-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.warning-icon {
  color: #E6A23C;
  margin-right: 8px;
}

.warning-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.warning-message {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
}

.dependencies-section {
  margin-bottom: 20px;
}

.dependencies-section h4 {
  font-size: 14px;
  color: #303133;
  margin: 0 0 12px 0;
  font-weight: 500;
}

.dependencies-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #F5F7FA;
  border-radius: 4px;
  padding: 12px;
}

.dependency-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: #606266;
}

.dep-icon {
  color: #909399;
  margin-right: 8px;
  font-size: 14px;
}

.show-more-section {
  text-align: center;
  margin-top: 12px;
}

.suggestion-section {
  margin-bottom: 20px;
}

.suggestion-section h4 {
  font-size: 14px;
  color: #303133;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.suggestion-content {
  display: flex;
  align-items: flex-start;
  background: #F0F9FF;
  border: 1px solid #B3D8FF;
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.suggestion-icon {
  color: #409EFF;
  margin-right: 8px;
  margin-top: 2px;
  flex-shrink: 0;
}

.risk-notice {
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .warning-title {
    color: #E5EAF3;
  }
  
  .warning-message {
    color: #A3A6AD;
  }
  
  .dependencies-list {
    background: #2D2D2D;
  }
  
  .dependency-item {
    color: #A3A6AD;
  }
  
  .suggestion-content {
    background: #1D4ED8;
    border-color: #3B82F6;
    color: #E5EAF3;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .warning-content {
    padding: 8px 0;
  }
  
  .warning-header {
    margin-bottom: 12px;
  }
  
  .warning-title {
    font-size: 15px;
  }
  
  .warning-message {
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  .dependencies-section,
  .suggestion-section {
    margin-bottom: 16px;
  }
}
</style> 